<template>
	<view class="page custom-page">

		<custom-head gradient back title="礼品发放">
			<view class="tool" slot="right">
        <i class="iconfont icon-fenlei fenlei" @click="enterPage"></i>
      </view>
		</custom-head>

		<u-tabs-swiper ref="uTabs" :list="list" :is-scroll="false" swiperWidth="750" @change="tabsChange"></u-tabs-swiper>
		<view class="gift">
			<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">

				<swiper-item class="swiper-item" v-for="i in list">
					<scroll-view scroll-y style="height: 100%;width: 100%;">
						<view class="gift_box">
							<view class="gift_box_item flex a-center jlr" v-for="item in giftList" @tap="show = true">
								<view class="flex a-center">
									<view class="image"> <image :src="item.avatar" mode="widthFix"/></view>
									<view class="info">
										<view class="title flex a-center">
											<view class="userImage"> <image :src="item.student_avatar" mode="widthFix"/></view>
											<view class="label">{{ item.name }}</view>
										</view>
										<p>{{ item.desc }}</p>
									</view>
								</view>
								<view class="date">
									{{ item.created_at }} <u-icon name="arrow-right" color="#8F9399" size="32"></u-icon>
								</view>
								
							</view>
						</view>
					</scroll-view>
				</swiper-item>

			</swiper>
		</view>
		<u-action-sheet cancelText="取消" :list="sheetlist" v-model="show" @click="enterPage"></u-action-sheet>

	</view>
</template>

<script>

import { getPresent } from '../../api/modules/present';
import { getPresent_history } from '../../api/modules/present_history';
import dayjs from 'dayjs';

	export default {
		data() {
			return {
				show:false,
				sheetlist:[{text:'发放'},{text:'撤销'}],
				list: [{
					name: '待发放'
				}, {
					name: '已发放'
				}, {
					name: '已取消'
				}],
				current: 0,
				swiperCurrent: 0,
				transferGiftList: [], // 礼品数据的中转战
				giftList: [], // 礼品发放的数据
				page_no:1 ,  // 默认加载第一页
				page_size:20 ,  // 每页加载 20条数据
				total: 0, // 一共有多少条数据 
				static_uri: getApp().globalData.glb_list.config.static_uri, // 获取全局配置文件
			};
		},
		onLoad(params) {
			this._getPresent_history()
		},
		methods: {
			enterPage(e){
				uni.navigateTo({
					url:'/pages/student/giftSend'
				})
			},
			tabsChange(index) { 
				// 0表示待审核，1表示审核通过待发放，2已发放，-1表示拒绝，-2用户取消
				console.log('选中那个 tab', index)
				this.swiperCurrent = index;
				if (index === 1) {
					this.giftList = this.transferGiftList.filter(i => i.status == 2)
				} else if (index === 2) {
					this.giftList = this.transferGiftList.filter(i => i.status == -2)
				} else  if (index === 0) {
					this.giftList = this.transferGiftList.filter(i => i.status == 1)
				}
			},
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},

			_getPresent_history() { // 获取礼品发放的数据
				// getPresent_history().then((res) => {
				// 	const { code, data } = res || {};
				// 	if (code === 200) {
				// 		this.giftList = ([] && data.list).map((item) => ({...item, created_at: dayjs(item.created_at).format('MM/DD')})).filter(i => i.status == 1)
				// 		this.transferGiftList = ([] && data.list).map((item) => ({...item, created_at: dayjs(item.created_at).format('MM/DD')}));

				// 		this.page_no = data.page_no;
				// 		this.total = data.total;
				// 	}
				// 	console.log('res-- 外面数据', res)
				// })

				const fn1 = new Promise((resolve, reject) => {
					getPresent_history({page_no: 1, page_size: 10000}).then((res) => resolve(res))
				})
				const fn2 = new Promise((resolve, reject) => {
					getPresent({page_no: 1, page_size: 10000}).then((res) => resolve(res))
				})

				Promise.all([fn1, fn2]).then((arr) => {
					const [res1, res2] = arr
					const { code, data, page_no, total } = res1
					const { code: code2, data: data2 } = res2

					const present_historyList = data.list.filter(i => i.sid === this.glbId)
					const presentList = data2.list.map(i => ({...i, avatar: `${this.static_uri}${i.avatar}`})).filter(i => i.sid === this.glbId)

					// 两个数组合并成一个数据
					for(let i=0; i<present_historyList.length; i++) {
						for(let j=0; j<presentList.length; j++) {
							if(present_historyList[i].id === presentList[j].id) {
								present_historyList[i].avatar = presentList[j].avatar
								present_historyList[i].desc = presentList[j].desc
							}
						}
					}

					// 两个数组合并成一个数据
					let studentsList = this.glbSchool.students;
					for(let i=0; i<present_historyList.length; i++) {
						for(let j=0; j<studentsList.length; j++) {
							if(present_historyList[i].id === studentsList[j].id) {
								present_historyList[i].name = studentsList[j].name
								present_historyList[i].student_avatar = studentsList[j].avatar
							}
						}
					}

					this.giftList = present_historyList.map((item) => ({...item, created_at: dayjs(item.created_at).format('MM/DD')})).filter(i => i.status == 1)
					this.transferGiftList = present_historyList.map((item) => ({...item, created_at: dayjs(item.created_at).format('MM/DD')}))
					this.page_no = data.page_no;
					this.total = data.total;

					console.log('---', present_historyList)
				
				})


			},
		}
	};
</script>

<style scoped>
	page{height: 100%;}
	.gift{height: calc(100% - 80rpx); overflow: hidden;}
	.gift swiper,.gift swiper-item{width: 100%; height: 100%;}
	.gift_box{ padding: 0px 20rpx;}
	.gift_box_item{background-color: #fff; margin-bottom: 20rpx; border-radius: 20rpx; box-shadow: 0rpx 2rpx 8rpx 0rpx #DDDFEB; padding: 30rpx 22rpx;}
	.gift_box_item .image{width: 150rpx; height: 150rpx; border-radius: 20rpx; overflow: hidden;}
	.gift_box_item .info{padding-left: 25rpx; font-size: 28rpx; color: #303133;}
	.gift_box_item .title{margin-bottom: 10rpx;}
	.gift_box_item .info .userImage{width: 60rpx; height: 60rpx; border-radius: 50%; overflow: hidden;}
	.gift_box_item .info .label{font-size: 32rpx;margin-left: 10rpx;}
	.date{font-size: 28rpx; color: #303133;}
	.gift_box_item:active{filter: brightness(80%)}
</style>